<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-colorP" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">消费队列</block>
		</cu-custom>
		<view class='my-info shop-user'>
			<image src='https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/bg-duilie.png' class='mime-bg'></image>

			<view class='summary'>
				<view class="use-message">
					<image :src='shopsInfo.shop_image?shopsInfo.shop_image:shopsInfo.headimg' class='avatar'></image>
					<view class='my-name'>{{shopsInfo.name}}</view>

				</view>

				<view class="shop-info">
					<view>
						<text>即将免单排名</text>
						<text>第{{filterData.length>0?filterData[0].sort:'0'}}名</text>
					</view>
					<view>
						<text>已奖励金额</text>
						<text>￥{{filterData.length>0?filterData[0].yifan_money:'0'}}</text>
					</view>
					<view>
						<text>待奖励金额</text>
						<text>￥{{filterData.length>0?filterData[0].daifan_money:'0'}}</text>
					</view>
				</view>

			</view>
			<view class="rules-name" @click="showRule">活动详情</view>
		</view>
		<view class="b-title">我的排名</view>
		<view class="list-content">
			<view class="weui-cell item-bg" v-for="item in filterData" :key="item">
				<view class="laye">{{item.sort}}</view>
				<!-- style="background: #b7e7fd;" -->
				<view class="weui-cell__hd">
					<image class="tx2" :src="item.shop_image?item.shop_image:item.headimg"></image>
				</view>
				<view class="weui-cell__bd">
					<view class="cell-tit">{{item.user_name}}</view>
					<view class="cell-desc">{{item.order_time}}</view>
				</view>
				<view class="weui-cell__ft text-red text-red-new">
					<text>已奖励：￥{{item.yifan_money}}</text>
					<text>待奖励：￥{{item.daifan_money}}</text>
				</view>

				<!-- <view class="layer">{{item.sort}}</view> -->
			</view>

			<view class="b-title">全部排名</view>
			<view class="weui-cell" v-for="(item,index) in arr" :key="item">
				<view class="weui-cell__hd">
					<text class="cell-num">{{index+1}}</text>
					<image class="tx2" :src="item.headimg"></image>
				</view>
				<view class="weui-cell__bd">
					<view class="cell-tit">{{item.user_name}}<text :class="item.order_source==2?'tag-in':'tag-out'">{{item.order_source==2?'商':'店'}}</text></view>
					<view class="cell-desc" style="color: #999">{{item.order_time}}</view>
				</view>
				<view class="weui-cell__ft text-red">
					*****
				</view>
			</view>
			<tui-divider width="60%" :gradual="true" v-if="noMore">没有更多了~</tui-divider>
		</view>
		<view class="rules-content" v-if="shopRuleStatus" @click='goDetail'>
			<view class="rules">
				<view class="content-text">
					<view class="title-t">商家活动</view>
					<view class="name">商家名称： {{shopInfo.shop}}</view>
					<view class="type">活动类型： {{shopInfo.rule_name}}</view>
					<view class="title-t">活动详情</view>
					<view class="text" v-if="!shopInfo.isArray">{{shopInfo.rule}}
					</view>
					<view class="text text-content" v-if="shopInfo.isArray">
						<view v-for="(item,index) in shopInfo.rule" :key="index" style="text-indent: 0">消费{{item.start}}元{{item.end == 99999999999999?'以上':'~'+item.end+'元区间'}}{{index!=0?'先退还':''}}{{item.money=='-1'?'全额退还':item.money}}{{item.end == 99999999999999?'，剩余金额重新排队等待退还，依次类推':''}}；</view>
					</view>
					<view class="navigateBtn" @click="goDetail">我明白了</view>
				</view>
			</view>
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/huodongrulebg1.png" class="flower"></image>
		</view>
	</view>
</template>

<script>
	import tuiDivider from "./component/divider.vue"
	import noContent from "./component/noContent.vue"
	export default {
		components: {
			tuiDivider,
			noContent
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				shopRuleStatus: false,
				filterData: [],
				arr: [],
				b_id: '',
				page: 1,
				shopsInfo: {},
				shopInfo: {},
				noMore: false
			}
		},
		onLoad(options) {
			var userInfo = uni.getStorageSync('userInfo')
			this.b_id = options.id
			 // ? options.id : '1234'
			this.getList()
		},
		methods: {
			showShare(){
				this.shopRuleStatus = false
			},
			// Rock solid 坚如磐石（检验函数）
			is_this_an_array(param) {
				if (Object.prototype.toString.call(param) === '[object Array]') {
					return true;
				} else {
					return false;
				}
			},
			showRule() {
				var that = this;
				this.$request({
					url: '/Shop/getRuleById',
					data: {
						business_id: that.b_id
					},
					success: res => {
						if (res.data.status == 1) {
							// 展示规则
							var result = res.data.data;
							if (result.rule) {
								if (that.is_this_an_array(result.rule)) {
									// 是数组类型
									result['isArray'] = true
								} else {
									result['isArray'] = false
									// WxParse.wxParse('showProduct', 'html', result.rule, that, 15);
								}
							}
							that.shopRuleStatus = true
							that.shopInfo = result
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			goDetail() {
				this.shopRuleStatus = false
			},
			getList() {
				var that = this;
				this.$request({
					url: '/Consumer/consumerQueueNew',
					data: {
						b_id: that.b_id,
						page: that.page
					},
					success: res => {
						if (res.data.status == 1) {
							var arrayData = that.arr
							var valData = res.data.data.data.queues
							for (var i in valData) {
								arrayData.push(valData[i])
							}
							that.shopsInfo = res.data.data.data.businessInfo
							that.filterData = res.data.data.user_order
							that.arr = arrayData
							that.page++
							if (that.page > res.data.data.pageCount) {
								that.noMore = true
							}
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style scoped>
	@import url("../components/u-parse/u-parse.css");

	.shop-user {
		width: 100%;
		position: relative;
		padding: 20rpx;
	}

	.mime-bg {
		width: 100%;
		height: 313rpx;
		border-radius: 18rpx;
		border-radius: 8rpx;
	}

	.summary {
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;
		height: 320rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
	}

	.use-message {
		box-sizing: border-box;
		width: 630rpx;
		margin-bottom: 25rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;

	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		margin-top: 20rpx;
		box-shadow: 2px -2px 5px 2px rgba(255, 255, 255, 1);
		border-radius: 50%;
	}

	.my-name {
		font-size: 30rpx;
		color: #fff;
		letter-spacing: 0.5px;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-top: 30rpx;
		margin-left: 30rpx;
		min-height: 50rpx;
	}

	.rules-name {
		position: absolute;
		top: 10px;
		right: 25px;
		min-width: 100rpx;
		line-height: 30rpx;
		font-size: 24rpx;
		text-align: right;
		color: #fff;
		text-align: right;
		width: 85%;
		padding-top: 20rpx;
	}

	.shop-info {
		flex: 1;
		display: flex;
		justify-content: space-around;
		width: 85%;
	}

	.shop-user .shop-info>view {
		flex: 1;
		max-height: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		justify-content: space-around;
		border-right: solid 1px #fff;
	}

	.shop-user .shop-info>view:last-child {
		border: none;
	}

	.shop-user .shop-info>view text {
		/* display: block; */
		width: 100%;
		white-space: nowrap;
		text-align: center;
	}

	.shop-user .shop-info>view text:nth-child(1) {
		font-size: 28rpx;
		color: #fff;
	}

	.shop-user .shop-info>view text:nth-child(2) {
		font-size: 28rpx;
		color: #fff;
	}

	.shop-user .shop-info>view text:nth-child(2) text {
		color: rgba(246, 96, 132, 1);
		font-style: normal;
	}

	/* 排名ui */

	.list-content {
		box-sizing: border-box;
	}

	.list-content .item-bg {
		position: relative;
	}

	.weui-cell {
		position: inherit;
	}

	.layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100rpx;
		height: 95rpx;
		padding-left: 15rpx;
		padding-top: 4rpx;
		background: url("http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/list_bg.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		color: rgb(12, 11, 11);
		border: none;
	}

	.tag-in {
		padding: 0 3rpx;
		height: 28rpx;
		font-size: 24rpx;
		line-height: 28rpx;
		margin-left: 10rpx;
		border-radius: 8rpx;
		color: #fff;
		border: solid 1rpx #3080e8;
		display: inline-block;
		background: #3080e8;
	}

	.tag-out {
		padding: 0 3rpx;
		height: 28rpx;
		font-size: 24rpx;
		line-height: 28rpx;
		margin-left: 10rpx;
		border-radius: 8rpx;
		color: #fff;
		border: solid 1rpx #19e8db;
		display: inline-block;
		background: #19e8db;
	}

	.weui-cell {
		font-size: 28rpx;
	}

	.weui-cell__ft {
		text-align: right;
		color: #d20019;
	}

	.text-red-new {
		display: flex;
		flex-direction: column;
		font-size: 26rpx;
	}

	.text-red-new text {
		text-align: left;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.weui-cell {
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #fff;
		box-sizing: border-box;
		overflow: hidden;
		position: inherit;
		border-bottom: solid 1rpx #efefef;
	}

	.weui-cell__bd {
		padding: 10rpx 0;
		flex: 1;
	}

	.cell-tit {
		color: #333333;
		padding-bottom: 10rpx;
	}

	.cell-desc {
		padding-top: 10rpx;
		color: #666;
	}

	.tx2 {
		width: 90rpx;
		height: 90rpx;
		border-radius: 16rpx;
		margin-right: 18rpx;
		margin-left: 18rpx;
		vertical-align: middle;
	}

	/* 规则展示 */

	.rules-content {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.rules-content  .rules {
		width: 648rpx;
		height: auto;
		background-color: rgba(255, 255, 255, 1);
		position: absolute;
		left: 50%;
		/* .top(200); */
		margin-left: -324rpx;
		top: 200rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: space-between;
		border-radius: 22rpx;

		background: url("https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/huodongrulebg2.png") no-repeat;
		background-size: 100% 100%;
	}

	.flower {
		position: absolute;
		top: 42%;
		left: 50%;
		width: 96%;
		height: 400rpx;
		margin-top: -400rpx;
		margin-left: -324rpx;
	}

	.content-text {
		position: absolute;
		top: 350rpx;
		left: 50%;
		margin-left: -323rpx;
		border-radius: 0 0 20rpx 20rpx;
		box-sizing: border-box;
		width: 99.7%;
		background: #FFFFFF;
		padding-top: 20rpx;
		padding-bottom: 50rpx;
		background: #fff;
	}

	.rules-content .rules .title {
		width: 100%;
		font-size: 40rpx;
		letter-spacing: 4px;
		color: rgba(217, 88, 88, 1);
		font-weight: bold;
		text-align: center;
	}

	.rules-content .rules .title-t {
		/* background: linear-gradient(to right, #e56b48, #c53c35); */
		width: 154rpx;
		height: 54rpx;
		border-radius: 50rpx;
		line-height: 54rpx;
		margin-top: 16rpx;
		margin-left: 39rpx;
		text-align: center;
		color: #333333;
		font-size: 32rpx;
	}

	.rules .name,
	.rules .type {
		line-height: 50rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
		margin-left: 39rpx;
		margin-right: 40rpx;
		box-sizing: border-box;
		color: #333;
	}

	.rules-content .rules .text {
		padding: 20rpx 60rpx;
		font-size: 26rpx;
		color: #999;
		text-align: justify;
		flex: 1;
		letter-spacing: 1px;
		line-height: 20px;
	}

	.rules-content .rules .text view {
		color: #999;
		font-size: 28rpx;
	}

	.rules-content .navigateBtn {
		width: 320rpx;
		height: 88rpx;
		color: #fff;
		/* background-color: #fff; */
		background: linear-gradient(to right, #ffc600, #f03a31);
		box-shadow: 0px 4px 4px 0px rgba(243, 82, 40, 0.5);
		border-radius: 42rpx;
		font-size: 28rpx;
		line-height: 88rpx;
		/* border: solid 1px rgba(224, 11, 11, 0.5); */
		text-align: center;
		/* margin-top: 30rpx; */
		margin: 20px auto 0;
		letter-spacing: 4px;
	}

	.b-title {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: left;
		background: #f5f5f5;
		padding: 0 24rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		color: #333;
	}
</style>
